<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jiSuanQi</title>
	<link rel="stylesheet" type="text/css" href="../计算器/jiSuanQi.css">
	<script type="text/javascript">
    window.onload=function()
    {
    	var a=document.getElementById('calculater').getElementsByTagName('td');
        var top=document.getElementById('display');
        var calculate=document.getElementById('result');
        var before="";
        var clear=document.getElementById('clear');
        var percent=document.getElementById('percent');
        var fuhao=document.getElementById('change');
        //点击各个按钮时利用innerHTML获取标签的内容，显示在计算器屏幕上
        for(i=4;i<a.length-1;i++)
        {
            a[i].onclick = function()
            {
                before +=this.innerHTML;
                top.innerHTML=before;
            }
        }
        //点击等于号，eval()可以将屏幕语句直接执行js，并返回结果，利用进行结果计算
        //正则
        function zhengze()
        {
            var str=top.innerHTML;
            var reg=/^(\*|\/).+/gi;
            var final=reg.test(str);
            if (final==true)
                return true;
            else return false;
        }
        function zhengze2()
        {
            var str=top.innerHTML;
            var reg=/(\*|\/|\+|\-)$/gi;
            var final=reg.test(str);
            if (final==true)
                return true;
            else return false;
        }
        function zhengze3()
        {
            var str=top.innerHTML;
            var reg=/[\*\/\+\-]{2,}/gi;
            var final=reg.test(str);
            if (final==true)
                return true;
            else return false;
        }
        calculate.onclick=function()
        {
            if(zhengze()||zhengze2()||zhengze3())
            {
                top.innerHTML='输入错误';
                before="";
            }
            else
            { 
                var calculation=eval(top.innerHTML);
                before=calculation;
                top.innerHTML=before;
                before="";
            }           
        }
        //AC可以清空屏幕内容
        clear.onclick=function () 
        {
            before="";
            top.innerHTML=before;
        }
        //%求百分制的实现
        percent.onclick=function ()
        {
            if(isNaN(before))
            {
                top.innerHTML="请输入数字";
                before="";
            }
            else 
            {
                before=eval(top.innerHTML)/100;
                top.innerHTML=before;
                before="";
            }
        }
        //点击+/-，改变屏幕上数字的正负号
        fuhao.onclick=function()
        {
            if(isNaN(top.innerHTML))
            {
                top.innerHTML="请输入数字";
                before="";
            }
            else 
            {
                before=0-eval(top.innerHTML);
                top.innerHTML=before;
                before="";
            }           
        }   	
    }


	</script>
</head>
<body>
		<table id="calculater" >
        <tr>
            <td id="display" colspan="5">0</td>
        </tr>
        <tr>
        	<td class="numberkey" id="clear">AC</td>
        	<td class="numberkey" id="change">+/-</td>
        	<td class="numberkey" id="percent">%</td>
        	<td class="numberkey" >/</td>
        </tr>
         <tr>
            <td class="numberkey" >7</td>
            <td class="numberkey" >8</td>
            <td class="numberkey" >7</td>
            <td class="numberkey" >*</td>
        </tr> 
        <tr>
            <td class="numberkey" >4</td>
            <td class="numberkey" >5</td>
            <td class="numberkey" >6</td>
            <td class="numberkey" >-</td>
        </tr>
        <tr>
            <td class="numberkey" >1</td>
            <td class="numberkey" >2</td>
            <td class="numberkey" >3</td>
            <td class="numberkey" >+</td> 
        </tr>
       
       
        <tr >
            <td class="numberkey" colspan="2">0</td>
            <td class="numberkey" >.</td>
            <td class="numberkey" id="result" onclick="resultscalcaulte()" >=</td>            
        </tr>

</body>
</html>